<template>
  <div class="home d-f">
    <div class="home-left">
      <Menu :menu_flag="isCollapse" :meunWidth="meunWidth"></Menu>
    </div>
    <div class="home-right d-f fd-c">
      <div class="header d-f jc-sb ai-c">
        <div class="header-left">
          <i class="el-icon-s-operation" style="font-size: 24px" @click="menuClick"></i>
        </div>
        <div class="header-right">
          <img src="../../assets/login/home_user.png" alt="" />
        </div>
      </div>
      <div class="main d-f">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>

// import Calendar from 'vue-calendar-component'
import Menu from "./menu.vue";

export default {
  name: "",
  components: { Menu, },
  data() {
    return {
      menu_flag: 2,
      isCollapse: false,
      my_visible: false, //显示退出
      meunWidth: 70,

    };
  },
  created() { },
  mounted() {

  },
  methods: {
    // meun展开与缩放
    menuClick() {

      if (this.menu_flag == 1) {
        this.isCollapse = false
        this.menu_flag = 2
      } else {
        this.isCollapse = true
        this.menu_flag = 1
      }
    },
    //退出登录
    go_login() {
      this.$router.push("/login");
      localStorage.removeItem("token");
    },

  },
};
</script>
<style scoped lang="scss">
@import "../../assets/sass/index.scss";

.home {
  font-size: 16px !important;
  width: 100%;
  // width: 100vw;
  height: 100vh;
  // height: 100%;
  // height: calc(100% - 70px);


  .home-left {
    // width: 70px;
    height: 100%;
    background-color: #304eec;
  }

  .home-right {
    width: 100%;
    height: 100%;

    .header {
      width: 100%;
      height: 70px;
      padding: 0 20px;
      box-sizing: border-box;

      >div {
        cursor: pointer;
      }
    }


  }
}

.main {
  background-color: #e9f0ff;
  width: 100%;
  height: 100%;
  // height: calc(100% - 70px);
}

* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}
</style>

<style>
*::-webkit-scrollbar {
    width: 4px;
    height: 8px;
    background-color: transparent;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
*::-webkit-scrollbar-track {
    background-color: rgba(117, 116, 116, 0.3);
}

/*定义滚动条轨道 内阴影+圆角*/
*::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
}

/*定义滑块 内阴影+圆角*/
.scrollbarHide::-webkit-scrollbar {
    display: none
}

.scrollbarShow::-webkit-scrollbar {
    display: block
}
</style>